<template>
	<view class="docTemplateListContent">
		<view class="upper">
			<CommonNavBar title="文书模板"   ></CommonNavBar>
		</view>
		<view class="centre">
			<view class="ul">
				<view class="li" v-for="(item, index) in documentTemplateList" :key="item.id" @click="documentTemplateOpen(item.id,item.templateName )">
					<view class="left"> 
						<image src="../../static/img/documentTemplate.png" mode=""></image>
						<view class="text">
							<view class="h1">{{ item.templateName }}</view>
						</view>
					</view>
					<view class="right">
						<view class="arrow"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CommonNavBar from '@/components/CommonNavBar.vue'
	export default {
		components: {
				CommonNavBar
		}, 
		data() {
			return { 
				documentTemplateList: [ ]
			}
		},
		onLoad(options) {
			this.initData();
		}, 
		methods: {
			goBack() {
				uni.navigateBack();
			},
			async initData(){
				let res = await uni.$api.getDocTemplateList();
				this.documentTemplateList = res.data.data;
			},
			documentTemplateOpen(id,title) { 
				uni.navigateTo({
					url: '/pages/assistant/docTemplateListActive?id='+id+"&title="+title
				})
				
				
			}
		},
		watch: {
			
		},
	}
</script>

<style lang="scss">
	.docTemplateListContent {
		background: #F9F9F9;
		height: calc(100vh - 195rpx);

		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;

			.title {
				background: url('../../static/img/inspectBg.png');
				background-size: cover;
				width: 100%;
				height: 115rpx;
				line-height: 115rpx;
				position: relative;
				display: flex;
				justify-content: center;

				.arrow {
					position: absolute;
					left: 33rpx;
					top: 50%;
					transform: translate(0%, -50%);
					width: 100rpx;
					height: 100rpx;
					 
					&::before {
						display: block;
						content: "";
						position: absolute;
						top: 50%;
						left: 0%;
						width: 20rpx;
						height: 20rpx;
						border-left: 1px solid #fff;
						border-top: 1px solid #fff;
						transform: translate(0%, -50%) rotate(-45deg);
					}
				}

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing: 1px;
				}
			}
		}

		.centre {
			margin: 115rpx 0 0 0;
			padding: 50rpx 17.5rpx 0 17.5rpx;
			height: calc(100vh - 165rpx);
			overflow-x: hidden;
			display: flex;
			flex-direction: column;
			
			.ul {
				
				.li {
					height: 98rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
					box-shadow: 0rpx 8rpx 15rpx 0rpx rgba(0,0,0,0.05);
					border-radius: 15rpx;
					
					.left {
						display: flex;
						align-items: center;
						
						image {
							width: 28rpx;
							height: 32rpx;
							margin: 0 14rpx 0 30rpx;
						}
						
						.text {
							
							.h1 {
								font-size: 23rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 31rpx;
								letter-spacing: 1px;
								padding-left: 15px;
								
							}
						}
					}
					
					.right {
						position: relative;
		
						.arrow {
							position: absolute;
							right: 50%;
							top: 50%;
							margin: 0 38rpx 0 0;
							width: 10rpx;
							height: 10rpx;
							border-left: 2rpx solid #888;
							border-top: 2rpx solid #888;
							transform: translate(-50%, -50%) rotate(135deg);
						}
					}
					
					&+.li {
						margin: 12.5rpx auto 0;
					}
				}
			}
		}
	}
</style>